
import React from 'react'
// import { useState} from 'react'

// const aaa = 1111
class AButton extends React.Component {
  state = {
    count: 1
  }
  add = () => {
    // 要想修改了变量，js和页面同步更新的话，必须使用类组件 专属的方法 setState
    // this.state.count++ 不要这样直接修改，是错误的写法
    // setState核心就是 重新调用了render函数，更新了页面渲染
    this.setState({
      count: this.state.count + 1
    })
  }
  render() {
    return (
      <>
      <h3>类组件----- {this.state.count}</h3>
      <button onClick={this.add}>count+1</button>
      </>
    )
  }
}

// 在react v16.8以前， 类组件也叫有状态组件(就是可以更新数据)， 函数组件也叫无状态组件（里面不能更新页面）
// 函数组件
function Header() {
  // 下面是普通变量
  let count = 1
  const add = () => {
    // 只能更新本地js数据，页面不会更新
    count++
  }
  return (
    <>
      <h3>测试---{count}</h3>
      <button onClick={add}>+1</button>
    </>
  )
}

// 下面组件就是利用了react 16.8+ 的api 专属的hooks  useState
function Footer() {
  // 下面定义的count变量就是 状态变量，和普通变量的区别就是 状态变量的更改可以更新页面。也就是数据驱动视图
  // useState是react提供的一个内置的hooks，专门用来创建变量和修改变量的方法的
  // 有了hooks我们的函数组件，也可以有状态了，所以和class组件的区别很小了
  const [count, setcount] = React.useState(0)
  // const [aa, setaa] = useState(0)

  return (
    <>
      <h3>我是函数组件，用了hooks---- {count}</h3>
      <button onClick={() => setcount(count + 1)}>hooks修改数据</button>
    </>
  )
}


function App() {
  return (
    <div>
      <AButton />
      <Header />
      <Footer />
    </div>
  )
}

export default App